<template>
	<view class="content">
		<NAVC title='锦鲤算力卡' />
		<!-- 锦鲤算力卡 -->
		<view class="topBanner">
			<p class="bannerTitle">锦鲤算力卡</p>
			<span>数量 {{ cardNum }}</span>
			<p class="zsText">每托管一台设备，消耗一张锦鲤算力卡</p>
		</view>
		<view class="haun">
			<p>交易记录</p>
			<view class="listDate" v-for="item in lists" :key="item.id">
				<p class="date">
					1. {{item.date}}
				</p>
				<p class="money">
					{{item.times}}
				</p>
				<p class="money">
					{{item.custodyConsumption}}
				</p>
				<p :class="{'red': item.money > 0, 'blue': item.money < 0}" class="moneys">
					{{ item.money }}
				</p>
			</view>
		</view>
		<view class="blocks"></view>
		<view class="btn">
			<van-button @click="onClickOverlay">赠送好友</van-button>
			<van-button @click="onClickTransfer">立即托管</van-button>
		</view>
		<!-- 底部转出弹出 -->
		<van-popup class="contactUsPopup" v-model:show="show" position="bottom" :style="{ height: '65%' }">
			<view class="title">转出</view>
			<image @click="OffPopup" class="Off" src="../../static/images/equipment/btn_close-popup@2x.png" mode="">
			</image>
			<view class="line van-hairline--bottom"></view>
			<view class="submit">
				<van-button class="roll-out" @click="rollOut">确认转出</van-button>
			</view>
			<view class="content">
				<view class="titleNav">锦鲤卡类型</view>
				<button class="Buy_now"></button>
				<view class="titleNav">对方UID</view>
				<view class="container">
					<input type="text" class="ipt" v-model="Uid" />
					<van-icon class="icon" name="scan" />
				</view>
				<view class="titleNav">转出数量</view>
				<view class="container">
					<input type="text" class="ipt" v-model="num" />
					<view class="text">
						<text class="num">张</text>
						<text class="all">全部转出</text>
					</view>
				</view>
				<view class="number">剩余： {{ cardNum }}张</view>
				<view class="titleNav">安全密码</view>
				<view class="container">
					<input type="text" class="ipt" v-model="password" />
				</view>
				<view class="number" style="color: red;">忘记密码?</view>
			</view>
		</van-popup>
		<!-- 转出成功弹出框 -->
		<van-popup class="contactUsPopup" v-model:show="showSuccess" position="bottom" :style="{ height: '65%' }">
			<image @click="OffSuccess" class="Off" src="../../static/images/equipment/btn_close-popup@2x.png" mode="">
			</image>
			<view class="img">
				<image src="../../static/images/Shop/success.png" mode=""></image>
			</view>
			<view class="titleA">转出成功</view>
			<view class="textA">您本次成功转出锦鲤算力卡 {{num}} 张</view>
			<view class="btn" style="justify-content: center;">
				<van-button class="btnA">我知道了</van-button>
			</view>
		</van-popup>
		<!-- 转出成功弹出框 -->
		<van-popup class="contactUsPopup" v-model:show="Transfer" position="bottom" :style="{ height: '65%' }">
			<view class="title">转入</view>
			<image @click="OffEwm" class="Off" src="../../static/images/equipment/btn_close-popup@2x.png" mode="">
			</image>
			<view class="line van-hairline--bottom"></view>
			<view class="content contentA">
				<view class="titleTransfer">锦鲤卡类型</view>
				<view class="bgc">
					<view class="bgcTitle">
						{{address}}
						<image @click="Copys" src="../../static/images/equipment/btn-copy.png" mode="" />
					</view>
					<view class="ewm">
						<QRCode :addressVal='address'></QRCode>
					</view>
					<button class="ewmBtn">保存到相册</button>
				</view>

			</view>
		</van-popup>
	</view>
</template>

<script lang="ts" setup>
	import { showNotify } from 'vant';
	import QRCode from '@/components/QRCode/index.vue';
	import NAVC from '@/components/equipmentC/navC/index.vue'
	import { hashCardsLogs, hashCardsVal, hashCardsOut } from '@/api/hashCards'
	import { getInfo } from '@/api/userInfo';
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { copy } from '@/utils/copy.ts';
	const cardNum = ref(0)
	const address = ref(0)
	const lists = ref([])
	// 传出的弹框控制开关
	const show = ref(false);
	onLoad(async () => {
		var { data } = await hashCardsLogs()
		var res = await hashCardsVal()
		console.log(data)
		cardNum.value = res.data.fund
		lists.value = data
		var res1 = await getInfo()
		address.value = res1.data.id
	})
	const onClickOverlay = () => {
		show.value = true
	};
	const OffPopup = () => {
		show.value = false
	}
	// uid
	const Uid = ref('')
	//转出数量
	const num = ref(0)
	// 安全密码
	const password = ref('')
	// 转出成功是的控制开关
	const showSuccess = ref(false);
	// 数据处理
	const formatMoney = function (money) {
		return money >= 0 ? `+${money}` : money.toString();
	}
	const rollOut = async () => {
		var res = await hashCardsOut({
			toUserId: Uid.value,
			num: num.value,
			payPassword: password.value
		})
		console.log(res)
		if (res.code === 500) {
			showNotify({ type: 'danger', message: res.msg });
		} else if (res.code === 200) {
			// 关闭转出的开关
			show.value = false
			// 打开转出成功的开关
			showSuccess.value = true
		}
	}
	// 复制地址
	const Copys = () => {
		copy(address.value)
	}
	const OffSuccess = () => {
		showSuccess.value = false
	}
	const Transfer = ref(false)
	const onClickTransfer = () => {
		Transfer.value = true
	}
	const OffEwm = () => {
		Transfer.value = false
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
	}

	.blocks {
		height: 200px;
	}

	.topBanner {
		width: 688px;
		height: 242px;
		background: url(@/static/images/Trusteeship/hashCard.png);
		background-size: 100% 100%;
		margin: 0 auto 34px;
		padding: 55px 0 0 50px;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;

		.bannerTitle {
			font-size: 60px;
			font-family: AliHYAiHei, AliHYAiHei;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 59px;
			margin-bottom: 24px;
		}

		span {
			font-size: 32px;
			color: #FFFFFF;
			// line-height: 45px;
		}

		.zsText {
			font-size: 24px;
			font-weight: 600;
			color: rgba(255, 255, 255, .4);
			line-height: 33px;
			margin-top: 8px;
		}

		// background-size: 688px 242px;
	}


	.haun {
		width: 686px;
		// height: 780px;
		background-color: rgba(255, 255, 255, .1);
		margin: 0 auto;
		border-radius: 32px;
		font-family: PingFangSC, PingFang SC;
		padding: 40px;
		box-sizing: border-box;
		color: #FFFFFF;

		.red {
			color: #FFB300;
		}

		.blue {
			color: #00D0B9;
		}

		.listDate {
			display: flex;
			justify-content: space-between;
			align-items: center;

			p {
				width: 140px;
				flex-grow: 1;
				font-size: 26px
			}

			.moneys {
				text-align: right;
			}

		}

		.date {
			width: 115px;
			height: 64px;
			font-size: 26px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 64px;
		}

		&>p {
			width: 150px;
			height: 50px;
			font-size: 36px;
			font-family: PingFangSC, PingFang SC;
			line-height: 50px;
			letter-spacing: 1px;
			margin-bottom: 40px;
		}
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 40px;
		width: 100vw;
		padding: 0 32px;
		box-sizing: border-box;
		height: 88px;
		display: flex;
		justify-content: space-between;

		&>:nth-child(1) {
			width: 47%;
			height: 88px;
			background: #00D0B9;
			border: none;
			border-radius: 16px;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		&>:nth-child(2) {
			width: 47%;
			height: 88px;
			border: none;
			background: #4E47FF;
			border-radius: 16px;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.contactUsPopup {
		--van-popup-background: #222324;
		--van-popup-round-radius: 36px;
		--van-popup-close-icon-size: 36px;
		border-radius: 36px 36px 0 0;
		color: white;

		// ::v-deep.van-icon {
		// 	top: 32px;
		// 	right: 32px;
		// }

		.title {
			position: absolute;
			left: 50%;
			top: 21px;
			transform: translateX(-50%);
			font-size: 40px;
		}

		.img {
			display: flex;
			justify-content: center;

			image {
				width: 201px;
				height: 178px;
				margin: 130px 0;
			}
		}

		.titleA {
			font-size: 40px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 40px;
		}

		.textA {
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40px;
			text-align: center;
			margin-top: 32px;
			margin-bottom: 80px;
		}

		.btnA {
			width: 216px;
			height: 72px;
		}

		.Off {
			position: absolute;
			right: 3%;
			top: 21px;
			font-size: 40px;
			height: 72px;
			width: 72px;
		}

		.line {
			top: 96px;
			width: 90%;
			margin: 0 auto;
		}

		.submit {
			width: 750px;
			height: 112px;
			background: #121317;
			box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3);
			position: absolute;
			bottom: 0%;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.roll-out {
				font-size: 28px;
				width: 280px;
				color: white;
				height: 80px;
				background: #00D0B9;
				border-radius: 16px;
				border: none;
			}
		}


		.content {
			height: calc(100% - 208px);
			overflow-y: scroll;
			width: 100%;
			padding: 0 30px 40px;
			box-sizing: border-box;
			margin-top: 96px;

			.titleTransfer {
				font-size: 32px;
				margin-top: 60px;
			}

			.bgc {
				margin: 16px auto 0;
				width: 600px;
				height: 550px;
				background: url('../../static/images/equipment/xinz.png');
				background-size: 100% 100%;

				.bgcTitle {
					height: 88px;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24px;

					image {
						height: 30px;
						width: 30px;
						margin-left: 10px;
					}
				}

				.ewm {
					width: 250px;
					height: 250px;
					margin: 50px auto;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.ewmBtn {
					width: 280px;
					height: 80px;
					line-height: 80px;
					background: #4E47FF;
					border-radius: 16px;
					font-size: 32px;
					color: white;
				}

			}

			.container {
				height: 88px;
				width: 100%;
				border: 2px solid rgba(255, 255, 255, 0.6);
				border-radius: 16px;
				padding: 0 26px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.van-icon {
					// height: 32px;
					// width: 32px;
					font-size: 40px;
					color: white;
					padding-left: 20px;
					border-left: 1px solid #cccccc;
				}

				.ipt {
					flex: 1;
					background-color: transparent;
					color: white;
					height: 100%;
					font-size: 28px;
				}

				.text {
					// margin-right: 20px;
					font-size: 28px;

					.num {
						padding-right: 20px;
						border-right: 1px solid #cccccc;

					}

					.all {
						margin-left: 20px;
						color: #00D0B9;
					}
				}

			}

		}
	}

	@property --direc {
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}

	.Buy_now {
		margin: 0 !important;
		width: 200px;
		height: 88px;
		color: #fff;
		margin: 32px auto 80px auto;
		line-height: 88px;
		text-align: center;
		--direc: 0deg;
		background-image: linear-gradient(var(--direc), #99F5DA, #83AAE1, #6953E9, #A82DC0);
		animation: rotate 3s linear infinite;
		border-radius: 16px;
	}

	.Buy_now::before {
		content: '';
		position: absolute;
		inset: 4px;
		background-color: #000001;
		border-radius: inherit;
	}

	.Buy_now::after {
		content: '锦鲤算力卡';
		font-size: 45px;
		position: absolute;
		inset: 4px;
		z-index: 1;
		margin-top: 20px;
		/* background-color: #000001; */
	}

	@keyframes rotate {
		to {
			--direc: 360deg
		}
	}

	.contentA {
		height: calc(100% - 112px) !important;
		overflow-y: none;
	}
</style>